<template>
  <div class="map-box">
    <div id="map">
      <img
        class="activity"
        src="@/assets/活动规则.png"
        alt=""
        @click="showDetails('', 'hdgz')"
      />

      <img class="map-img" src="@/assets/巫溪活动_03.png" alt="" />
      <img class="map-img" src="@/assets/巫溪活动_05.png" alt="" />
      <img class="map-img" src="@/assets/巫溪活动_06.png" alt="" />
      <img class="map-img" src="@/assets/巫溪活动_07.png" alt="" />

      <!-- 地点 -->

      <div
        :class="`dd-${index + 1} ${item.islighted ? 'active' : ''}`"
        v-for="(item, index) in spotList"
        :key="index"
        @click="showDetails(index, item.code)"
      ></div>

      <!-- <img @click="showDetails(0, 'GTZ')" class="dd-1" :src="`@/assets/巫溪游客中心.png`" alt=""> -->
      <!-- <img @click="showDetails(1, 'BLFWQ')" class="dd-2" src="@/assets/白鹿服务区.png" alt=""> -->
      <!-- <img @click="showDetails(2, 'FJFWQ')" class="dd-3" src="@/assets/奉节服务区.png" alt=""> -->
      <!-- <img @click="showDetails(3, 'HCB')" class="dd-4" src="@/assets/巫溪红池坝.png" alt=""> -->
      <!-- <img @click="showDetails(4, 'LWD')" class="dd-5" src="@/assets/灵巫洞.png" alt=""> -->
      <!-- <img @click="showDetails(5, 'DXG')" class="dd-6" src="@/assets/兰英大峡谷.png" alt=""> -->
    </div>
    <div class="map-btn">
      <img class="yun" src="@/assets/下面云.png" alt="" />
    </div>
    <div class="prize-box" @click="goPrize()">
      <div class="btn">
        <img class="btn" src="@/assets/按钮2.png" alt=""  />
        <img class="choujiang" :class="lightedSpots > 0 ? 'active' : ''" src="@/assets/去抽奖.png" alt="">
      </div>
      <img class="ren" src="@/assets/人.png" alt="" />

      <div class="btn-text" v-if="lightedSpots > 1">
        已获取碎片 {{ lightedSpots }}/6，获得{{ fragmentCount }}次抽奖资格
      </div>
      <div class="btn-text" v-else>
        已获取碎片 {{ lightedSpots }}/2，还差{{ 2 - lightedSpots }}个就能抽奖
      </div>
    </div>

    <!-- 弹窗 -->
    <div class="pop-box" v-if="isShow">
      <div class="black"></div>
      <div class="content">
        <div class="title">{{ popTitle }}</div>
        <div class="neirong">

            <div v-if="JDcode == 'HCB'" class="jingdian" style="text-indent: .56rem;">红池坝景区现已获得国家森林公园、国家4A级旅游景区，市级风景名胜区，市级旅游度假区。海拔在1800km-2630km之间，森林草场覆盖总面积约36.2万亩，年均气温7.1℃，是重庆海拔最高、盛夏最凉的避暑胜地。自然的偏爱，历史的沉淀，让这方水土更显神秘、更显大气、更显厚重。红池坝拥有“三大、三奇、三特”的资源禀赋。三大，一是全球最大的云中花海；二是中国南方最大的高山草场；三是中国西南最大的观雪胜地。三奇，一是夏凝冬融的夏冰洞；二是反道而行的西流溪；三是奇水斑斓的三色池。三特，一是巫巴文化、红色文化、春申名人等文化之特；二是森林、草地、植物、动物等原始生态之特；三是空气、水质、食材等养生环境之特。
                <img class="spotimgs" src="@/assets/图片1.png" @click="previewImage([require('@/assets/图片1.png'), require('@/assets/图片2.png'), require('@/assets/图片3.png'), require('@/assets/图片4.png'), require('@/assets/图片5.png'), require('@/assets/图片6.png')],0)"/>
                <img class="spotimgs" src="@/assets/图片2.png" @click="previewImage([require('@/assets/图片1.png'), require('@/assets/图片2.png'), require('@/assets/图片3.png'), require('@/assets/图片4.png'), require('@/assets/图片5.png'), require('@/assets/图片6.png')],1)"/>
                <img class="spotimgs" src="@/assets/图片3.png" @click="previewImage([require('@/assets/图片1.png'), require('@/assets/图片2.png'), require('@/assets/图片3.png'), require('@/assets/图片4.png'), require('@/assets/图片5.png'), require('@/assets/图片6.png')],2)"/>
                <img class="spotimgs" src="@/assets/图片4.png" @click="previewImage([require('@/assets/图片1.png'), require('@/assets/图片2.png'), require('@/assets/图片3.png'), require('@/assets/图片4.png'), require('@/assets/图片5.png'), require('@/assets/图片6.png')],3)"/>
                <img class="spotimgs" src="@/assets/图片5.png" @click="previewImage([require('@/assets/图片1.png'), require('@/assets/图片2.png'), require('@/assets/图片3.png'), require('@/assets/图片4.png'), require('@/assets/图片5.png'), require('@/assets/图片6.png')],4)"/>
                <img class="spotimgs" src="@/assets/图片6.png" @click="previewImage([require('@/assets/图片1.png'), require('@/assets/图片2.png'), require('@/assets/图片3.png'), require('@/assets/图片4.png'), require('@/assets/图片5.png'), require('@/assets/图片6.png')],5)"/>
            </div>

            <div v-if="JDcode == 'DXG'" class="jingdian" style="text-indent: .56rem;">
                兰英大峡谷景区现已获得国家4A级旅游景区，位于重庆市巫溪县通城镇和兰英乡境内，距离巫溪县城20公里，景区范围4.11平方公里，由红三军巫溪历史陈列展、红三军纪念广场、红军湖和兰英大峡谷组成。兰英大峡谷处于国家级自然保护区阴条岭范围内，东临重庆市巫山县、北临湖北省神农架，上至阴条岭（兰英寨）、下至洋溪河（巫山县大昌镇），峡谷全长50余公里，谷底最窄处仅13米，平均深度1500余米，最深处达2400余米，有“亚洲第一深谷”之美誉。峡谷地貌奇特、野趣浓郁，以瀑高、峰险、山奇、石怪、水清、洞幽、禽珍、兽异构成一条喀斯特山水画廊。景区范围内的兰英大峡谷有七大核心景观，即：卧佛吟峰、兰英女神、神龟揽月、鸾英点将、云崖寨、国画山和天门奇想。随着景区不断升级打造，依托“深”“险”“红”“英”峡谷四大特色，将形成以沉浸式深谷奇景、红色文化、崖谷游乐和山乡休闲为亮点的旅游景区。
                <img class="spotimgs" src="@/assets/图片7.png" @click="previewImage([require('@/assets/图片7.png'), require('@/assets/图片8.png'), require('@/assets/图片9.png'), require('@/assets/图片10.png')], 0)"/>
                <img class="spotimgs" src="@/assets/图片8.png" @click="previewImage([require('@/assets/图片7.png'), require('@/assets/图片8.png'), require('@/assets/图片9.png'), require('@/assets/图片10.png')], 1)"/>
                <img class="spotimgs" src="@/assets/图片9.png" @click="previewImage([require('@/assets/图片7.png'), require('@/assets/图片8.png'), require('@/assets/图片9.png'), require('@/assets/图片10.png')], 2)"/>
                <img class="spotimgs" src="@/assets/图片10.png" @click="previewImage([require('@/assets/图片7.png'), require('@/assets/图片8.png'), require('@/assets/图片9.png'), require('@/assets/图片10.png')], 3)"/>
            </div>
            <div v-if="JDcode == 'LWD'" class="jingdian" style="text-indent: .56rem;">
                灵巫洞景区现已获得国家4A级旅游景区，山青水秀峡幽，岩险峰奇洞绝，被专家和游客誉为“三峡库区第一洞”。主要由琳宫、桃源洞、过江索道、旱地雪橇等景点组成，形成了“乘电梯上山观光，入溶洞地下寻幽，坐缆车空中揽胜，驭滑车(旱地雪撬)下山猎奇，驾游艇宁河逐浪”的水陆空立体交叉游览体。游灵巫洞、漂流大宁河已是无数游客到巫溪打卡的必游项目。
                <img class="spotimgs" src="@/assets/图片11.png" @click="previewImage([require('@/assets/图片11.png'), require('@/assets/图片12.png'), require('@/assets/图片13.png'), require('@/assets/图片14.png'),require('@/assets/图片15.png')], 0)"/>
                <img class="spotimgs" src="@/assets/图片12.png" @click="previewImage([require('@/assets/图片11.png'), require('@/assets/图片12.png'), require('@/assets/图片13.png'), require('@/assets/图片14.png'),require('@/assets/图片15.png')], 1)"/>
                <img class="spotimgs" src="@/assets/图片13.png" @click="previewImage([require('@/assets/图片11.png'), require('@/assets/图片12.png'), require('@/assets/图片13.png'), require('@/assets/图片14.png'),require('@/assets/图片15.png')], 2)"/>
                <img class="spotimgs" src="@/assets/图片14.png" @click="previewImage([require('@/assets/图片11.png'), require('@/assets/图片12.png'), require('@/assets/图片13.png'), require('@/assets/图片14.png'),require('@/assets/图片15.png')], 3)"/>
                <img class="spotimgs" src="@/assets/图片15.png" @click="previewImage([require('@/assets/图片11.png'), require('@/assets/图片12.png'), require('@/assets/图片13.png'), require('@/assets/图片14.png'),require('@/assets/图片15.png')], 4)"/>
            </div>
          <div
            class="spotimgs"
            v-if="spotimgs && (JDcode != 'HCB' && JDcode != 'DXG' && JDcode != 'LWD')"
            :style="`background-image:url(${spotimgs})`"
            @click="previewImage([spotimgs])"
          ></div>
          <div v-html="content"></div>
          <div @click="daohang" class="daohang" v-if="JDcode">导航：{{popTitle}}</div>
        </div>

        <img class="pop-btn" src="@/assets/d3.png" alt="" v-if="checkSuccess" />
        <!-- <img class="pop-btn" src="@/assets/d4.png" alt="" v-if="checkInType"> -->
        <img class="pop-btn" src="@/assets/d5.png" alt="" v-else-if="popObj.islighted">
        <img
          class="pop-btn"
          src="@/assets/d1.png"
          alt=""
          @click="showJULI"
          v-else-if="userLocation.lng && distance > 0.2"
        />
        <img
          class="pop-btn"
          src="@/assets/d2.png"
          alt=""
          v-else-if="isDWdown && !checkSuccess && userLocation.lng && distance < 0.2 && isLocaBtn"
          @click="checkIn"
        />
        <img
          class="pop-btn"
          src="@/assets/按钮3.png"
          alt=""
          @click="getUserLocation('show')"
          v-else-if="!userLocation.lng && isLocaBtn"
        />
      </div>
      <img class="close" @click="closePop" src="@/assets/close.png" alt="" />
    </div>
  </div>
</template>

<script>
import wx from "weixin-js-sdk";
import VueJsonp from "vue-jsonp";
import request from "@/http2";
export default {
  data() {
    return {
        isLocaBtn: false,
      isShow: false,
      popTitle: "活动时间",
      content: "",
      errorMessage: "",
      spotimgs: "",
      checkInType: false,
      userLocation: {
        lat: 0,
        lng: 0,
      },
      distance: null,
      popObj: {},
      dw: [
        {
          name: "奉节高铁站",
          lat: "31.030948",
          lng: "109.381077",
        },
        {
          name: "白鹿服务区",
          lat: "31.627156",
          lng: "109.628014",
        },
        {
          name: "奉节服务区",
          lat: "31.034271",
          lng: "109.38132",
        },
        {
          name: "巫溪红池坝",
          lat: "31.539768",
          lng: "109.096994",
        },
        {
          name: "灵巫洞",
          lat: "31.480842",
          lng: "109.65021",
        },
        {
          name: "兰英大峡谷景区",
          lat: "31.421942",
          lng: "109.803746",
        },
      ],
      spotList: [],
      code: "",
      checkSuccess: false,
      lightedSpots: 0,
      fragmentCount: 0,
      isDWdown: false,
      hdjs: '',
      JDcode: '',
    };
  },
  mounted() {
    // 景点列表
    this.init();



  },
  methods: {
    daohang() {
      let {title, coord} = this.popObj;
      coord = coord.split(',')
      let url = `http://api.map.baidu.com/marker?location=${coord[0]},${coord[1]}&title=${title}&content=&output=html&src=webapp.baidu.openAPIdemo`
      window.location.href = url;      
    },
    showJULI() {
        this.$toast(`你距离目的地还有${this.distanceTxt(this.distance)}`)
    },
    previewImage(url, index) {
      this.ImagePreview({
        images: url,
        startPosition: index || 0,
      });
    },
    init() {
        let token = localStorage.getItem('userinfo');
        if (token) {
            request
            .post("/spot/list")
            .then((res) => {
            this.spotList = res.data.spots;
            this.lightedSpots = res.data.lightedSpots;
            this.fragmentCount = res.data.fragmentCount;
            })
            .catch((err) => {
            this.spotList = this.dw;
            });
        } else {
            request
            .post("/spot/listNoLogin")
            .then((res) => {
                this.spotList = res.data.spots;
            })
            .catch((err) => {
                this.spotList = this.dw;
            });
        }

      
    },
    //打卡
    checkIn() {
      request
        .post("/spot/light", {
          code: this.code,
          coordinate: `${this.userLocation.lat},${this.userLocation.lng}`,
        })
        .then((res) => {
          this.$toast(res.data);
          if (res.state == 1) {
            this.checkSuccess = true;
            this.checkInType = true;
            this.init();
          }
        });
    },
    // 距离文案
    distanceTxt(n) {
      if (n > 1) {
        return `${n}公里`;
      } else {
        return `${n * 1000}米`;
      }
    },
    // 计算距离函数
    Rad(d) {
      //根据经纬度判断距离
      return (d * Math.PI) / 180.0;
    },

    // 计算距离
    getDistance(lat1, lng1, lat2, lng2) {
      // lat1用户的纬度
      // lng1用户的经度
      // lat2商家的纬度
      // lng2商家的经度
      var radLat1 = this.Rad(lat1);
      var radLat2 = this.Rad(lat2);
      var a = radLat1 - radLat2;
      var b = this.Rad(lng1) - this.Rad(lng2);
      var s =
        2 *
        Math.asin(
          Math.sqrt(
            Math.pow(Math.sin(a / 2), 2) +
              Math.cos(radLat1) *
                Math.cos(radLat2) *
                Math.pow(Math.sin(b / 2), 2)
          )
        );
      s = s * 6378.137;
      s = Math.round(s * 10000) / 10000;
      s = s.toFixed(1);
      console.log("经纬度计算的距离:" + s);
      //   this.$toast("经纬度计算的距离:" + s);
      this.$toast.clear();
      this.isDWdown = true;
      return s;
    },

    // 坐标转换成百度坐标
    getBaiduCoordinate(latitude, longitude) {
      let _this = this;
      const url = `https://api.map.baidu.com/geoconv/v2/?coords=${longitude},${latitude}&model=2&ak=lnXu5sFhHOGMatox9u7BQ5m3FZf0jwoE`;
      return this.$jsonp(url)
        .then((data) => {
          if (data.status === 0) {
            const result = data.result[0];
            return {
              latitude: result.y,
              longitude: result.x,
            };
          } else {
            _this.$toast("转换坐标失败");
            throw new Error("Failed to convert coordinates.");
          }
        })
        .catch((error) => {
          _this.$toast(JSON.stringify(error));
          throw error;
        });
    },
    // 获取位置
    getUserLocation(t) {
      let _this = this;
      if (t == "show") {
        this.$toast.loading({
          message: "定位中...",
          forbidClick: true,
          duration: 0,
        });
      }

      wx.getLocation({
        type: "wgs84", // 默认为wgs84的gps坐标，如果要返回直接给openLocation用的火星坐标，可传入'gcj02'
        success: function (res) {
          var latitude = res.latitude; // 纬度，浮点数，范围为90 ~ -90
          var longitude = res.longitude; // 经度，浮点数，范围为180 ~ -180。
          var speed = res.speed; // 速度，以米/每秒计
          var accuracy = res.accuracy; // 位置精度
          // 你可以在这里使用获取到的经纬度信息
          console.log("Latitude: " + latitude);
          console.log("Longitude: " + longitude);


          console.log("位置精度：" + accuracy);
          _this.getBaiduCoordinate(latitude, longitude).then((res) => {
            console.log(`百度经纬度` + JSON.stringify(res));
            _this.userLocation.lat = res.latitude;
            _this.userLocation.lng = res.longitude;

            let jdLoca = _this.popObj.coord.split(',')
            // 距离
            _this.distance = +_this.getDistance(
              res.latitude,
              res.longitude,
              jdLoca[0],
              jdLoca[1],
            );
          });
        },
        fail: function (res) {
          // 调用失败
          alert("获取位置失败");
        },
      });

      setTimeout(() => {
        _this.$toast.clear();
      }, 2000);
    },
    closePop() {
      this.isShow = false;
      this.distance = null;
      this.popObj = {};
      this.popTitle = "";
      this.content = "";
      this.spotimgs = "";
      this.code = "";
      this.isLocaBtn = false;
      this.isDWdown = false;
      this.checkSuccess = false;
      this.JDcode = false;
    },
    showDetails(i, code) {
      let token = localStorage.getItem("token");
        
      if (code == 'hdgz') {
        this.isShow = true;
        this.popTitle = '活动规则'
        this.content = `<div style="text-indent: .56rem">
        距离打卡点位0.2公里范围内，点亮图标，即可收集一枚碎片，收集齐2枚碎片，即可参与巫溪烤鱼消费券抽奖活动<b>（每天限120份烤鱼券，每张烤鱼券价值57元，于2024年8月30日内可使用。每人仅限领一张烤鱼券）</b><br/><br/>收集碎片要求：条件一，游客在奉节高铁站巫溪游客中心、巫镇高速往巫溪方向白鹿服务区、沪蓉高速往夔门方向奉节服务区任选1个点位点亮对应图标即可；条件二，在巫溪红池坝、灵巫洞、兰英大峡谷景区任选1个景区点亮图标即可；条件一和条件二必须点亮其中一个图标，才能进入抽奖页面。
    </div>`;
        return
      }


      console.log('token:' + token);

      if (!token) {
        this.Dialog.confirm({
          title: "温馨提示",
          confirmButtonText: "去注册",
          message: "新用户？快速注册，开启您的专属旅程！",
          beforeClose: (action, done) => {
            if (action === "confirm") {
              setTimeout(() => {
                done();
                this.$router.push({
                  path: "/bindphone",
                });
              }, 1000);
            } else {
              done();
            }
          },
        });
        return;
      }

      this.isShow = true;
      this.isLocaBtn = true;
      if (!code) return;
      let item = this.spotList.filter((item) => item.code == code)[0];
      this.isShow = true;
      this.popObj = item;
      this.popTitle = item.title;
      this.content = '';
      this.JDcode = item.code;
      this.spotimgs = item.spotimgs;
      this.code = item.code;
      // 如果已经授权了,就直接显示位置
      if (this.userLocation.lat == 0 ) return;

      this.getUserLocation();
    },
    goPrize() {
        let token = localStorage.getItem('token');
        window.location.href ='http://h5cloud.cqliving.com/act/activity/#/lottery/smashGoldenEggDefault/Index?actCode=8TSCZp2dCiyevQGldk0L3xmmyP55uO&token=' + token
        return;
        if (this.fragmentCount > 0) {
        //   "https://h5cloud.cqliving.com/act/activity/#/lottery/smashGoldenEggDefault/Index?actCode=QWAo2kfESOESb0Vs5oYzVTkd3w8nFi";
        
      } else {
        this.$toast("请先到指定位置点亮哦！");
      }
    },
  },
};
</script>

<style lang="less" scoped>
.daohang{
  text-align: center;
  margin-top: .2rem;
  text-decoration: underline;
}
.jingdian{
    text-indent: .56rem;
    .spotimgs{
        margin-top: .2rem;
    }
}
.spotimgs {
  max-width: 80%;
  display: block;
  margin: auto;
  border-radius: 0.2rem;
  height: 3.2rem;
  background-size: cover;
}
.pop-btn {
  width: 4.71rem;
  display: block;
  margin: auto;
}

@keyframes activity {
  0% {
    transform: scale(0.95);
  }

  50% {
    transform: scale(1);
  }

  100% {
    transform: scale(0.95);
  }
}

.activity {
  width: 1.2rem;
  position: fixed;
  top: 20%;
  right: 0.2rem;
  z-index: 22;
  animation: activity 2s infinite linear;
}

.pop-box {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding-top: 2rem;
  box-sizing: border-box;
  z-index: 33;

  .close {
    position: relative;
    z-index: 7;
    display: block;
    margin: 0.6rem auto 0;
    width: 0.7rem;
    height: 0.73rem;
  }

  .content {
    padding: 0.4rem;
    box-sizing: border-box;
    word-break: break-all;
    color: #285853;
    font-size: 0.28rem;
  
    .neirong {
      padding: 0.2rem 0;
      margin-bottom: .2rem;
      max-height: 50vh;
      overflow-y: scroll;
    }
    .title {
      top: -1.2rem;
      left: 50%;
      transform: translateX(-50%);
      position: absolute;
      background: url("@/assets/弹窗标题.png");
      width: 6.9rem;
      height: 1.7rem;
      background-size: 100%;
      z-index: 4;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 0.3rem;
      color: #285853;
      padding-top: 0.2rem;
      box-sizing: border-box;
    }

    &::after {
      position: absolute;
      top: -0.4rem;
      left: 0;
      background-image: url("@/assets/活动时间_01.png");
      width: 100%;
      content: "";
      height: 0.47rem;
      background-size: 100%;
    }

    &::before {
      position: absolute;
      bottom: -0.4rem;
      left: 0;
      background-image: url("@/assets/活动时间_03.png");
      width: 100%;
      content: "";
      height: 0.46rem;
      background-size: 100%;
    }

    position: relative;
    z-index: 2;
    background: url(@/assets/活动时间.png);
    width: 6.7rem;
    background-size: 100%;
    margin: auto;
  }

  .black {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
  }
}

.btn-text {
  position: absolute;
  top: 0.2rem;
  font-size: 0.26rem;
  color: #2a5c58;
  transform: translateX(-50%);
  left: 50%;
  white-space: nowrap;
  z-index: 3;
  margin-left: -0.95rem;

}

.dd-4 {
  width: 2.25rem;
  position: absolute;
  top: 7.6rem;
  left: 50%;
  transform: translateX(-50%);
  margin-left: 1.7rem;
  background-image: url("../assets/巫溪红池坝.png");
  background-size: cover;
  height: 1.57rem;
  &.active {
    background-image: url("../assets/巫溪红池坝1.png");
  }
}

.dd-6 {
  width: 2.68rem;
  position: absolute;
  top: 11.2rem;
  left: 50%;
  transform: translateX(-50%);
  margin-left: -0.4rem;
  background-image: url("../assets/兰英大峡谷.png");
  background-size: cover;
  height: 1.88rem;
  &.active {
    background-image: url("../assets/兰英大峡谷1.png");
    height: 1.89rem;
  }
}

.dd-5 {
  width: 2rem;
  position: absolute;
  top: 9.5rem;
  left: 50%;
  transform: translateX(-50%);
  margin-left: 1.1rem;
  background-image: url("../assets/灵巫洞.png");
  background-size: cover;
  height: 1.75rem;
  &.active {
    background-image: url("../assets/灵巫洞1.png");
    height: 1.88rem;
  }
}

.dd-3 {
  width: 3.15rem;
  position: absolute;
  top: 8.6rem;
  left: 50%;
  transform: translateX(-50%);
  margin-left: -2.2rem;
  background-image: url("../assets/奉节服务区.png");
  background-size: cover;
  height: 1.59rem;
  &.active {
    height: 1.66rem;
    background-image: url("../assets/奉节服务区1.png");
  }
}

.dd-2 {
  width: 2.76rem;
  position: absolute;
  top: 6.3rem;
  left: 50%;
  transform: translateX(-50%);
  margin-left: -0.8rem;
  background-image: url("../assets/白鹿服务区.png");
  background-size: cover;
  height: 1.59rem;
  &.active {
    height: 1.69rem;
    background-image: url("../assets/白鹿服务区1.png");
  }
}

.dd-1 {
  width: 3.09rem;
  position: absolute;
  top: 4.39rem;
  left: 50%;
  transform: translateX(-50%);
  background-image: url("../assets/巫溪游客中心.png");
  background-size: cover;
  height: 1.24rem;
  &.active {
    height: 1.4rem;
    background-image: url("../assets/巫溪游客中心1.png");
  }
}

.prize-box {
  position: fixed;
  z-index: 5;
  bottom: 0;
  left: 0;
  width: 100%;
  padding-bottom: 0.5rem;
  box-sizing: border-box;

  @keyframes ren {
    0% {
      transform: rotate(0deg) translateX(-50%);
    }

    50% {
      transform: rotate(-5deg) translateX(-50%);
    }

    100% {
      transform: rotate(0deg) translateX(-50%);
    }
  }

  .ren {
    position: absolute;
    top: -1.3rem;
    left: 50%;
    transform: translateX(-50%);
    width: 1.74rem;
    margin-left: -2.4rem;
    animation: ren 2s infinite linear;
  }

  .btn {
    position: relative;
    width: 6.53rem;
    display: block;
    margin: 0 auto;
    z-index: 2;

  }
  .choujiang{
    position: absolute;
    top: 0;
    right: 0;
    width: 2.15rem;
    height: .75rem;
    z-index: 2;
    @keyframes choujiang {
        0%{
            transform:  scale(1.1);
        }
        50%{
            transform:  scale(1);
        }
        100%{
            transform: scale(1.1);
        }
    }
    &.active{
        animation: choujiang 1s linear infinite;
    }
  }
}

.map-box {
  min-height: 100vh;
  position: relative;

  .map-btn {
    position: fixed;
    z-index: 4;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 750px;
    pointer-events: none;

    .yun {
      width: 100%;
      display: block;
      margin: auto;
    }
  }
}

#map {
  position: relative;
  padding-bottom: 0.3rem;

  .map-img {
    display: block;
    width: 7.5rem;
  }
}
</style>